<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpringBoot Word 操作示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(45deg, #2196F3, #21CBF3);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }
        
        .content {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 40px;
            padding: 25px;
            border: 2px solid #f0f0f0;
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        
        .section:hover {
            border-color: #2196F3;
            box-shadow: 0 5px 15px rgba(33, 150, 243, 0.1);
        }
        
        .section h2 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.5em;
            border-bottom: 2px solid #2196F3;
            padding-bottom: 10px;
        }
        
        .section p {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .btn-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #2196F3, #21CBF3);
            color: white;
        }
        
        .btn-success {
            background: linear-gradient(45deg, #4CAF50, #45a049);
            color: white;
        }
        
        .btn-info {
            background: linear-gradient(45deg, #17a2b8, #138496);
            color: white;
        }
        
        .btn-warning {
            background: linear-gradient(45deg, #ffc107, #e0a800);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .upload-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 25px;
            margin-top: 20px;
        }
        
        .file-input {
            margin: 15px 0;
        }
        
        .file-input input[type="file"] {
            padding: 10px;
            border: 2px dashed #2196F3;
            border-radius: 5px;
            width: 100%;
            background: white;
        }
        
        .result-area {
            margin-top: 20px;
            padding: 15px;
            background: #e9ecef;
            border-radius: 5px;
            min-height: 100px;
            white-space: pre-wrap;
            font-family: monospace;
            display: none;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #333;
        }
        
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .form-group textarea {
            height: 100px;
            resize: vertical;
        }
        
        .custom-form {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }
        
        .footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }
        
        .loading {
            display: none;
            color: #2196F3;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 SpringBoot Word 操作示例</h1>
            <p>使用 Apache POI 库实现 Word 文档的生成、读取和操作</p>
        </div>
        
        <div class="content">
            <!-- 简单文档生成 -->
            <div class="section">
                <h2>📄 简单文档生成</h2>
                <p>生成包含标题和内容的基础Word文档，支持自定义标题和内容。</p>
                <div class="btn-group">
                    <a href="/word/simple" class="btn btn-primary" target="_blank">生成默认文档</a>
                    <button class="btn btn-info" onclick="showCustomForm('simple')">自定义生成</button>
                </div>
                
                <div id="simple-form" class="custom-form" style="display: none;">
                    <form action="/word/simple" method="get" target="_blank">
                        <div class="form-group">
                            <label for="title">文档标题：</label>
                            <input type="text" id="title" name="title" value="我的自定义文档" placeholder="请输入文档标题">
                        </div>
                        <div class="form-group">
                            <label for="content">文档内容：</label>
                            <textarea id="content" name="content" placeholder="请输入文档内容">这是我自定义的文档内容。\n\n可以包含多行文本和换行符。</textarea>
                        </div>
                        <button type="submit" class="btn btn-success">生成自定义文档</button>
                    </form>
                </div>
            </div>
            
            <!-- 表格文档生成 -->
            <div class="section">
                <h2>📊 表格文档生成</h2>
                <p>生成包含格式化表格的Word文档，展示员工信息数据。</p>
                <div class="btn-group">
                    <a href="/word/table" class="btn btn-success" target="_blank">生成表格文档</a>
                </div>
            </div>
            
            <!-- 模板文档生成 -->
            <div class="section">
                <h2>📋 模板文档生成</h2>
                <p>生成包含多种元素的复杂Word文档，包括标题、日期、列表、签名等。</p>
                <div class="btn-group">
                    <a href="/word/template" class="btn btn-warning" target="_blank">生成默认模板</a>
                    <button class="btn btn-info" onclick="showCustomForm('template')">自定义模板</button>
                </div>
                
                <div id="template-form" class="custom-form" style="display: none;">
                    <form action="/word/template" method="get" target="_blank">
                        <div class="form-group">
                            <label for="template-title">报告标题：</label>
                            <input type="text" id="template-title" name="title" value="项目进度报告" placeholder="请输入报告标题">
                        </div>
                        <div class="form-group">
                            <label for="template-content">报告内容：</label>
                            <textarea id="template-content" name="content" placeholder="请输入报告内容">本月项目进展顺利，各项指标均达到预期目标。\n\n主要完成的工作包括：需求分析、系统设计、核心功能开发等。</textarea>
                        </div>
                        <div class="form-group">
                            <label for="signature">签名：</label>
                            <input type="text" id="signature" name="signature" value="项目经理" placeholder="请输入签名">
                        </div>
                        <button type="submit" class="btn btn-success">生成自定义模板</button>
                    </form>
                </div>
            </div>
            
            <!-- 文档上传读取 -->
            <div class="section">
                <h2>📤 文档上传读取</h2>
                <p>上传Word文档并读取其中的文本内容，支持.doc和.docx格式。</p>
                
                <div class="upload-section">
                    <div class="file-input">
                        <input type="file" id="wordFile" accept=".doc,.docx" onchange="uploadFile()">
                    </div>
                    <div class="loading" id="loading">正在处理文档...</div>
                    <div class="result-area" id="result"></div>
                </div>
            </div>
            
            <!-- 批量操作演示 -->
            <div class="section">
                <h2>⚡ 批量操作演示</h2>
                <p>演示批量生成Word文档的功能（可根据实际需求扩展）。</p>
                <div class="btn-group">
                    <button class="btn btn-warning" onclick="batchGenerate()">批量生成演示</button>
                </div>
                <div class="result-area" id="batch-result"></div>
            </div>
        </div>
        
        <div class="footer">
            <p>&copy; 2024 SpringBoot Word 操作示例 | 使用 Apache POI 技术</p>
        </div>
    </div>
    
    <script>
        function showCustomForm(type) {
            const form = document.getElementById(type + '-form');
            form.style.display = form.style.display === 'none' ? 'block' : 'none';
        }
        
        function uploadFile() {
            const fileInput = document.getElementById('wordFile');
            const loading = document.getElementById('loading');
            const result = document.getElementById('result');
            
            if (fileInput.files.length === 0) {
                return;
            }
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            loading.style.display = 'block';
            result.style.display = 'none';
            
            fetch('/word/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                loading.style.display = 'none';
                result.style.display = 'block';
                
                if (data.success) {
                    result.innerHTML = `文件名: ${data.fileName}\n文件大小: ${data.fileSize} 字节\n\n文档内容:\n${data.content}`;
                    result.style.background = '#d4edda';
                    result.style.color = '#155724';
                } else {
                    result.innerHTML = `错误: ${data.message}`;
                    result.style.background = '#f8d7da';
                    result.style.color = '#721c24';
                }
            })
            .catch(error => {
                loading.style.display = 'none';
                result.style.display = 'block';
                result.innerHTML = `请求失败: ${error.message}`;
                result.style.background = '#f8d7da';
                result.style.color = '#721c24';
            });
        }
        
        function batchGenerate() {
            const result = document.getElementById('batch-result');
            result.style.display = 'block';
            result.innerHTML = '正在执行批量生成...';
            result.style.background = '#fff3cd';
            result.style.color = '#856404';
            
            fetch('/word/batch')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    result.innerHTML = `批量生成完成\n${data.message}\n生成数量: ${data.generatedCount}`;
                    result.style.background = '#d4edda';
                    result.style.color = '#155724';
                } else {
                    result.innerHTML = `批量生成失败: ${data.message}`;
                    result.style.background = '#f8d7da';
                    result.style.color = '#721c24';
                }
            })
            .catch(error => {
                result.innerHTML = `请求失败: ${error.message}`;
                result.style.background = '#f8d7da';
                result.style.color = '#721c24';
            });
        }
    </script>
</body>
</html>